/*
* 差异化货品 1精选好货，2大额神券，39.9元封顶，4时尚女装，5潮流男装，6精致潮鞋
* */
import React, {PureComponent} from 'react';
import {Dimensions, Image, FlatList, StyleSheet, View, Text} from 'react-native';
import ShopCard from '../../components/ShopCard';
import {tb_items_material_dat} from '../../api/haoDan';
import Header from '../../components/Header';
import {ActivityIndicator} from '@ant-design/react-native';

const {width, height} = Dimensions.get('window');

export default class ChaYiHua extends PureComponent {
    constructor(props) {
        super(props);
        this.state = {
            list_loading: false,
            list_end: false,
            list: [],
            cid: this.props.navigation.state.params.cid,
            last_page :1,
            title:this.props.navigation.state.params.title,
        };
    }

    componentWillUnmount = () => {
        this.setState = (state,callback)=>{
            return;
        };
    }

    componentDidMount() {
        this.GetData();
    }
    /**
     * 获取数据
     */
    GetData() {
        const {list_loading, list_end, cid,last_page,list} = this.state;
        if (list_loading && list_end) {
            return;
        }
        this.setState(
            {
                list_loading: true,
                list_error: false,
                list_end: false,
            },
            () => {
                tb_items_material_dat(cid,last_page)
                    .then((res) => {

                        if (res.data.length <=0 ){
                            this.setState({
                                list_loading: false,
                                list_end : true,
                                list_error: false,
                            });
                        } else {
                            this.setState({
                                list_loading: false,
                                list: last_page === 1 ? res.data : list.concat(res.data),
                                last_page: res.min_id
                            });

                            this.rc && this.rc.finishRefresh();
                        }

                    })
                    .catch(() => {
                        this.setState({
                            list_loading: false,
                            list_error: true,
                        });
                    });
            },
        );
    }
    render() {
        const {title, list,list_end, list_error} = this.state;
        return (
            <View style={styles.container}>
                <Header
                    title={title}
                    backgroundColor={'#E94F62'}
                    backColor={'#fff'}
                    titleColor={'#fff'}
                />
                <FlatList
                    onEndReached={() => !list_end && !list_error && this.GetData()}
                    onEndReachedThreshold={0.2}
                    data={list}
                    keyExtractor={item => item.productId}
                    numColumns={2}
                    renderItem={item => <ShopCard item={item} />}
                    ListFooterComponent={
                        list_end ? (
                            <Text style={styles.list_footer}>已经到底了~</Text>
                        ) : list_error ? (
                            <Text style={styles.list_footer}>网络有点问题~</Text>
                        ) : (
                            <View style={{height: 30, justifyContent: 'center'}}>
                                <ActivityIndicator color={'#F55C6E'} text={'加载中'} />
                            </View>
                        )
                    }
                />
            </View>
        );
    }
}
const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#F4F4F4',
    },
    background: {
        flexDirection: 'row',
        alignItems: 'center',
        backgroundColor: '#fff',
        height: 150,
        marginHorizontal: 15,
        paddingHorizontal: 15,
        paddingVertical: 30,
        borderRadius: 30,
    },
    swiper_container: {
        borderRadius: 10,
        height: (245 / 600) * (width - 30),
        width: width - 30,
    },
    swiper_image: {
        borderRadius: 15,
        width: width - 30,
        height: (245 / 600) * (width - 30),
    },
    list: {
        paddingHorizontal: 15,
        marginVertical: 10,
    },
    list_item: {
        flexDirection: 'row',
        alignItems: 'center',
        backgroundColor: '#1ED0B8',
        height: 50,
        borderRadius: 20,
        paddingHorizontal: 20,
    },
});
